import { BasicColumn } from '@/components/Table';
import { h } from 'vue';
import { BasicLTag } from '@/components/LTag';
import { NAvatar, NText } from 'naive-ui';

export const columns: BasicColumn[] = [
  {
    title: 'id',
    key: 'id',
    width: 50,
  },
  
  {
    title: '菜品信息',
    key: 'name',
    width: 150,
    /**
     * 自定义渲染头像和昵称
     * @param row 当前行数据
     * @returns 头像和昵称的组合元素
     */
    render: (row) => {
      // 使用naive-ui的组件渲染头像和昵称
      return h('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } }, [
        h(NAvatar, {
          size: 'small',
          src: row.cover || undefined,
          fallback: row.name ? row.name.substring(0, 1).toUpperCase() : 'U',
          style: { backgroundColor: '#1677ff' }
        }),
        h(NText, null, {
          default: () => row.name || '未知菜品'
        })
      ]);
    }
  },
  {
    title: '是否公开',
    key: 'is_public_text',
    width: 100,
    render: (row) => {
      return h(BasicLTag, {
        label: row.is_public_text,
        list: [
          {
            type: 'success',
            label: '公开',
          },
          {
            type: 'error',
            label: '不公开',
          },
        ],
      });
    },
  },
  {
    title: '时间',
    key: 'created_at',
    width: 160,
  }
];
